<template>
  <div>
    <header>
      <div class="top">
        <el-page-header  @back="goBack" content="歌单"></el-page-header>
        <!-- <i class="el-icon-search"></i> -->
      </div>
      <div class="content">
        <img class="img" src="@/assets/109951164127323230.jpg" alt>
        <div class="right">
          <h3>独处，是一个人最好的增值期</h3>
          <!-- <span>居家古风&nbsp;&nbsp; 如何把生活过成诗</span> -->
        </div>
      </div>
    </header>
    <div class="navigate">
      <span class="nav-list">
        歌曲列表
        <i class="el-icon-arrow-right"></i>
      </span>
       <div class="link-classfy">
          <a href>华语</a>
          <a href>轻音乐</a>
          <a href>摇滚</a>
      </div>
     
    </div>
    <!-- <p>
      <audio style="width:100%; z-index:20" controls :src="src" autoplay></audio>
    </p> -->
    <table>
      <tr>
        <th>
          <i class="icon-font icon-gengduoda"></i>
          <!-- <i class="el-icon-video-play"></i> -->
        </th>
        <th class="all">播放全部</th>
        <th class="collect">
          <i class="el-icon-plus"></i>
          <span>收藏</span>
        </th>
      </tr>
      <tr v-for="item in arrSongName" :key="item.id">
        <td></td>
        <td class="txtname" @click="play(item.id)">
          <span>{{item.name}}</span>
          <div class="artname">
            <span>{{item.album.artists[0].name}}</span>--
            <span>{{item.album.name}}</span>
          </div>
        </td>
        <td>
          <i class="el-icon-video-play" ></i>
          <!-- <i class="icon-gengduoda iconfont"></i> -->
          <i class="el-icon-more"></i>
        </td>
      </tr>
    </table>
    <div class="musicplay">
        <audio controls :src="src" autoplay></audio>
    </div>
  </div>
</template>
<script>
//引入请求api
import { getMusiclist, bofang } from "@/api";
export default {
  data() {
    return {
      arrSongName: [],
      src: ""
    };
  },
  created() {
    this.getMusicList();
  },
  methods: {
    goBack() {
       this.$router.push("/songlist")
        // console.log('go back');
      },
    getMusicList() {
      getMusiclist().then(res => {
        // console.log(res.data.recommend)
        // console.log(res.data.recommend[0].album.artists[0].name)
        // console.log(res.data.recommend[0].hMusic.playTime)
        let total = res.data.recommend[0].hMusic.playTime / 1000;
        var min = parseInt(total / 60);
        // console.log(min);
        var ss = parseInt(total - min * 60);
        // console.log(ss);

        let data = res.data.recommend;
        this.arrSongName = data;
        // console.log(this.arrSongName)
      });
    },
    play(id) {
      bofang({ id })
        .then(res => {
          this.src = res.data.data[0].url;
          // console.log(this.src)
          // this.$router.push('playsong/'+id)
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style>

.top {
  height: 60px;
  background-image: linear-gradient(to right bottom, #785e68,#7f626a);
}
.el-icon-back:before {
  font-size: 40px;
  position: relative;
  top: 10px;
  left: 5px;
  color: white;
}
.el-page-header__title {
  font-size: 30px;
  position: relative;
  top: 25px;
  left: 20px;
  color: white;
}
.el-page-header__content {
  font-size: 30px;
  position: relative;
  top: 25px;
  left: 100px;
  color: white;
}
.el-icon-search {
  color: white;
  font-size: 50px;
  position: relative;
  left: 281646c81646c00px;
  top: -30px;
}
 .navigate{
       padding:30px 0 30px 0
   }
 .navigate .link-classfy{
      float:right;
      margin-right:30px;
  }
   .navigate .link-classfy a{
    color: #666666;
    margin-left:20px;
  }
 .nav-list{
       font-size:32px;
       position: relative;
       left:-160px;
   }
.content {
  height: 230px;
  /* background: red; */
  background-image: linear-gradient(to right bottom, #785e68,#7f626a);
  /* border:1px solid black; */
  position: relative;
  /* background-image:url(../../assets/bg.jpg) cover; */
  background: url(../../assets/bg.jpg) no-repeat;
  background-size: cover;
}
.content .img {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 190px;
  width: 280px;
}
.right {
  position: absolute;
  left: 340px;
  top:20px;
  font-size: 30px;
  color: white;
}
.right h3{
  font-weight: 500;
  text-align: left;
  margin-bottom:20px;
}
.right span{
  font-size: 30px;
}
table {
  background:white;
  /* border: 1px solid black; */
  border-radius: 20px;
  width: 100%;
  overflow: hidden;
  position: relative;
  top:-100px;
}
table .all {
  float: left;
  box-sizing: border-box;
  padding-top: 30px;
  text-align: center;
}
.collect {
  background: #fa5547;
}
table th {
  height: 100px;
  font-size: 30px;
}
table td {
  /* border: 1px solid black; */
  height: 128px;
  /* width:150px; */
}
.txtname {
  font-size: 32px;
  text-align: left;
  width: 300px;
  overflow: hidden;
}
.txtname .artname {
  font-size: 24px;
  color: gray;
}
.el-icon-video-play:before {
  font-size: 50px;
}
.el-icon-more:before {
  font-size: 50px;
}
.musicplay{
  position: fixed;
  top:1300px;
  width:100%;
  /* border:1px solid black; */
   height:100px;

}
.musicplay audio{
  width:100%;
  /* height:400px; */
}
</style>